<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>广告</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>发布</title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/center-vip.css">
		<link rel="stylesheet" href="css/user-information.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/hmt.js"></script>
	</head>
	<style>
		.layui-upload-img {
			width: 180px;
			height: 180px; 
			margin: 0 10px 10px 0;
			
		}
	</style>
	<!--header star-->
	<header class="hasManyCity hasManyCitytwo" id="header">
		<a href="index.html" class="fl fanhui"><i class="iconfont icon-fanhui"></i></a>
		<div class="header-tit">
			发布广告
		</div>
	</header>

	<div class="layui-upload" style="margin-top: 55px;">
		<button type="button" class="layui-btn" id="test2" style="margin-left: 5px;">多图片上传</button>
		<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			预览：
			<div class="layui-upload-list" id="demo2"></div>
		</blockquote>
	</div>
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			<p class="font">手机</p>
			<input type="text" value="138123456789" disabled="disabled" class="input" />
		</li>
		<li class="mui-table-view-cell">
			<p class="font">座机</p>
			<input type="text" placeholder="010-52445255" class="input" />
		</li>
		<li class="mui-table-view-cell">
			<p class="font">邮箱</p>
			<input type="text" placeholder="415258115@163.com" class="input" />
		</li>
		<li class="mui-table-view-cell">
			<p class="font">QQ</p>
			<input type="text" placeholder="415258115@163.com" class="input" />
		</li>
		<li class="mui-table-view-cell">
			<p class="font">微信</p>
			<input type="text" placeholder="415258115@163.com" class="input" />
		</li>
		<li class="mui-table-view-cell">
			<p class="font">请输入发布的城市:</p>
			<input type="text" placeholder="415258115@163.com" class="input" />
		</li>
		<li class="mui-table-view-cell">
			<span style="font-size: 16px;">广告类型:</span>
			<select style="float: right; font-size: 18px;">
				<option>餐饮</option>
				<option>旅游</option>
				<option>休闲娱乐</option>
				<option>购物</option>
				<option>生活服务</option>
				<option>酒店</option>
				<option>汽车</option>
				<option>其他</option>
			</select>
		</li>
	</ul>
	<p style="margin:8px 0 0 7px; font-size: 15px; color: black;">请输入广告描述:</p>
	<textarea name="" rows="4" cols="" style="width: 96%;margin-left: 2%; font-size: 14px;"></textarea>
	<a href="merelease.html" style="float: right; margin-top: 8px; color: red; ">前往我发布的广告>></a>
	<!--底部区域-->
	<div class="user-bt0">
		<button class="user-bt1">确定</button>
	</div>

	<script src="css/layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use('upload', function() {
			var $ = layui.jquery,
				upload = layui.upload;

			//普通图片上传
			var uploadInst = upload.render({
				elem: '#test1',
				url: '/upload/',
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$('#demo1').attr('src', result); //图片链接（base64）
					});
				},
				done: function(res) {
					//如果上传失败
					if(res.code > 0) {
						return layer.msg('上传失败');
					}
					//上传成功
				},
				error: function() {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function() {
						uploadInst.upload();
					});
				}
			});

			//多图片上传
			upload.render({
				elem: '#test2',
				url: '/upload/',
				multiple: true,
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
					});
				},
				done: function(res) {
					//上传完毕
				}
			});

			//指定允许上传的文件类型
			upload.render({
				elem: '#test3',
				url: '/upload/',
				accept: 'file' //普通文件
					,
				done: function(res) {
					console.log(res)
				}
			});
			upload.render({ //允许上传的文件后缀
				elem: '#test4',
				url: '/upload/',
				accept: 'file' //普通文件
					,
				exts: 'zip|rar|7z' //只允许上传压缩文件
					,
				done: function(res) {
					console.log(res)
				}
			});

			//同时绑定多个元素，并将属性设定在元素上
			upload.render({
				elem: '.demoMore',
				before: function() {
					layer.tips('接口地址：' + this.url, this.item, {
						tips: 1
					});
				},
				done: function(res, index, upload) {
					var item = this.item;
					console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增
				}
			})

			//多文件列表示例
			var demoListView = $('#demoList'),
				uploadListIns = upload.render({
					elem: '#testList',
					url: '/upload/',
					accept: 'file',
					multiple: true,
					auto: false,
					bindAction: '#testListAction',
					choose: function(obj) {
						var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
						//读取本地文件
						obj.preview(function(index, file, result) {
							var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join(''));

							//单个重传
							tr.find('.demo-reload').on('click', function() {
								obj.upload(index, file);
							});

							//删除
							tr.find('.demo-delete').on('click', function() {
								delete files[index]; //删除对应的文件
								tr.remove();
								uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
							});

							demoListView.append(tr);
						});
					},
					done: function(res, index, upload) {
						if(res.code == 0) { //上传成功
							var tr = demoListView.find('tr#upload-' + index),
								tds = tr.children();
							tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
							tds.eq(3).html(''); //清空操作
							return delete this.files[index]; //删除文件队列已经上传成功的文件
						}
						this.error(index, upload);
					},
					error: function(index, upload) {
						var tr = demoListView.find('tr#upload-' + index),
							tds = tr.children();
						tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
						tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
					}
				});

			//绑定原始文件域
			upload.render({
				elem: '#test20',
				url: '/upload/',
				done: function(res) {
					console.log(res)
				}
			});

		});

		document.addEventListener("plusready", function() {
			// 注册返回按键事件
			plus.key.addEventListener('backbutton', function() {
				// 事件处理
				window.history.back();
			}, false);
		});
	</script>

	</body>

</html>